<!-- 文章 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <el-descriptions title="文章列表">
            <template #extra>
                <el-button @click="addNotice" type="primary">添加</el-button>
            </template>
        </el-descriptions>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetArticleListApi">
            <!-- <template #balanceType="{ row }">
                <div class="balanceType"
                    :style="{ color: balanceTypeObj[row.balanceType].color, backgroundColor: balanceTypeObj[row.balanceType].bgk }">
                    {{ balanceTypeObj[row.balanceType].text }}
                </div>
            </template> -->
            <template #balanceType="{ row }">
                <div @click="changeIsRecommend(row)">
                    <el-switch :active-value="1" :inactive-value="2" :model-value="row.articleStatus" />
                </div>
            </template>
            <template #action="{ row }">
                <el-button @click="edit(row)" type="primary" link> 编辑 </el-button>
                <el-button @click="del(row.articleId)" type="danger" link> 删除 </el-button>
            </template>
        </PageTable>
    </el-card>
    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="添加文章" width="40%" :before-close="handleClose">
        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
            <el-form-item label="文章名称">
                <el-input v-model="formLabelAlign.articleTitle" />
            </el-form-item>
            <el-form-item label="文章分类" width="100%">
                <el-select v-model="formLabelAlign.labelId">
                    <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="文章详情">
                <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="formLabelAlign.content"
                        :defaultConfig="editorConfig" @onCreated="handleCreated" />
                </div>
            </el-form-item>
            <el-form-item label="是否展示">
                <el-switch :active-value="1" :inactive-value="2" v-model="formLabelAlign.articleStatus" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, defineComponent, shallowRef, onBeforeUnmount } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadImageFn } from '@/utils'
import { GetArticleListApi, GetArticleLabelApi, StartArticleApi, DelArticleApi, AddArticleApi, EchoArticleApi } from "@/api/Article";


defineComponent({
    components: {
        FormTable,
        PageTable,
        Editor,
        Toolbar
    }
})



// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {}

const editor = editorRef.value
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const editorConfig = {
    MENU_CONF: {}
}

editorConfig.MENU_CONF['uploadImage'] = {
    async customUpload(file, insertFn) {
        let url = await uploadImageFn(file)
        insertFn(url)
    }
}



const positionType = ref([])
//文章标签列表查询(下拉框)
async function GetArticleLabel() {
    const res = await GetArticleLabelApi(2)
    res.data.forEach(item => {
        item.label = item.labelName
        item.value = +item.labelId
    })
    positionType.value = res.data
    console.log(positionType.value);
}
GetArticleLabel()

const parameter = reactive({
    articleTitle: null,
    labelId: null,
    articleStatus: null
})
const AddDialog = ref(false)
//弹窗form
let formLabelAlign = ref({
    articleTitle: null,
    labelId: null,
    articleStatus: 1,
    content: '',
})


const formList = ref([
    {
        type: 'input',
        label: '文章名称',
        code: 'articleTitle',
    },

    {
        type: 'select',
        label: '文章分类',
        options: positionType,
        code: 'balanceType',
    },
    {
        type: 'select',
        label: '是否显示',
        options: [
            { label: '是', value: 1 },
            { label: '否', value: 2 },
        ],
        code: 'articleStatus',
    },
])
const column = [
    { label: '文章名称', prop: 'articleTitle' },
    { label: '分类', prop: 'labelName' },
    { label: '是否显示', slots: 'balanceType' },
    { label: '创建时间', prop: 'createTime' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.articleTitle = null
    parameter.labelId = null
    parameter.articleStatus = null
    tableRef.value.refresh(true)
}

//添加
function addNotice() {
    AddDialog.value = true
}



//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value.articleTitle = null
    formLabelAlign.value.labelId = null
    formLabelAlign.value.articleStatus = 1
    formLabelAlign.value.content = ''
    tableRef.value.refresh()
}


//开关
async function changeIsRecommend(row) {
    await StartArticleApi(row.articleId, row.articleStatus = row.articleStatus === 1 ? false : true)
    ElMessage({
        message: '修改成功',
        type: 'success',
    })
    tableRef.value.refresh()
}

//删除按钮
async function del(id) {
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await DelArticleApi(id)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        tableRef.value.refresh()
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//保存
async function save() {
    console.log(formLabelAlign.value);
    if (!formLabelAlign.value.articleId) {
        await AddArticleApi(formLabelAlign.value)
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    } else {
        await EchoArticleApi(formLabelAlign.value)
        ElMessage({
            message: '编辑成功',
            type: 'success',
        })
    }
    handleClose()
    tableRef.value.refresh()
}

//编辑
function edit(row) {
    console.log(row);
    formLabelAlign.value = row
    formLabelAlign.value.labelId = 1 //先写死
    AddDialog.value = true

}
</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>